/**
 * @Author: ls-mac <ls>
 * @Date:   2018-11-11 11:00:41
 * @Last modified by:   ls
 * @Last modified time: 2018-11-22 14:52:57
 */
import React, { PureComponent } from 'react';
import { Checkbox, Form, Input, Icon, Row, Col } from 'antd';
import styles from './index.less';

const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
let OBJ = {};
export default class DPLink extends PureComponent {
  constructor(props) {
    super(props);
    const { dataIndex0, dataIndex1, options0, options1 } = this.props.options;
    this.state = {
      dataIndex0,
      options0,
      dataIndex1,
      options1,
      indeterminate: false,
      checkAll: false,
      checkedList: [],
      isFirst: true,
      gropKey: 0,
      OBJ: {},
    };
  }

  componentWillUpdate() {
    const { dataIndex0, dataIndex1, options0, options1 } = this.props.options;
    const { checkedList } = this.state;
    OBJ = {};
    this.setState({
      dataIndex0,
      options0,
      dataIndex1,
      options1,
    });
  }

  onCheckAllChange = e => {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { dataIndex0, dataIndex1, checkedList, options0, options1 } = this.state;

    const newCheckedList = options0.map(v => {
      return v.value;
    });

    const checkObj = {};
    checkObj[dataIndex0] = e.target.checked ? newCheckedList : [];
    form.setFieldsValue(checkObj);

    const checkedArr = [];
    const _list = e.target.checked ? newCheckedList : [];
    _list.map(v => {
      if (OBJ) {
        OBJ[v].map(v2 => {
          checkedArr.push(v2.value);
        });
      }
    });
    const checkObj2 = {};
    checkObj2[dataIndex1] = checkedArr;
    form.setFieldsValue(checkObj2);

    this.setState({
      checkedList: checkObj[dataIndex0],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  onChangeP = checkedList => {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { options0, dataIndex1 } = this.props.options;
    this.setState({
      checkedList,
      indeterminate: !!checkedList.length && checkedList.length < options0.length,
      checkAll: checkedList.length === options0.length,
    });
    const checkedArr = [];
    checkedList.map(v => {
      OBJ[v].map(v2 => {
        checkedArr.push(v2.value);
      });
    });
    const checkObj = {};
    checkObj[dataIndex1] = checkedArr;
    console.log(form);
    form.setFieldsValue(checkObj);
    this.setState({ gropKey: this.state.gropKey + 1 });
  };

  onClickHanle = e => {
    const _key = e.target.getAttribute('data-key');
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { options0, dataIndex1 } = this.props.options;
    const checkedArr = form.getFieldsValue([dataIndex1])[dataIndex1]
      ? form.getFieldsValue([dataIndex1])[dataIndex1]
      : [];
    OBJ[_key].map(v => {
      if (checkedArr.findIndex(item => v.value === item) != -1) {
        checkedArr.splice(checkedArr.findIndex(item => v.value === item), 1);
      }
    });
    const checkObj = {};
    checkObj[dataIndex1] = checkedArr;
    form.setFieldsValue(checkObj);
    this.setState({ gropKey: this.state.gropKey + 1 });
  };

  groupDo = () => {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    const { options0, options1, checkedList, isFirst, dataIndex1 } = this.state;
    options0.map(v1 => {
      const arr = [];
      if (options1.code) {
        
      } else {
        options1.map(v2 => {
          if (v2.productCode === v1.value) {
            let value='depotCode';
              if(dataIndex1.match(/\d$/)){
                value=dataIndex1.substring(0,dataIndex1.length-2)
              }else{
                value=dataIndex1.substring(0,dataIndex1.length-1)
              }
            arr.push({ label: v2.depotName, value: v2[value] });
          }
        });
        OBJ[v1.value] = arr;
      }
    });

    let _checkedList = [];
    let isChecked = true;
    if (!checkedList.length) {
      _checkedList = options0.map(v => {
        return v.value;
      });
      isChecked = false;
    } else {
      _checkedList = checkedList;
    }
    const createDom = () => {
      const re = [];
      if (!OBJ) {
        return;
      }
      _checkedList.map(v => {
        if (OBJ[v] instanceof Array) {
          if (!OBJ[v].length) {
            return false;
          }
          OBJ[v].map(v2 => {
            re.push(
              <Checkbox key={v2.value} value={v2.value}>
                {v2.label}
              </Checkbox>
            );
          });
          re.push(
            <a
              href="javascript:void(0)"
              className={styles.clearIcon}
              data-key={v}
              onClick={this.onClickHanle}
            >
              清除
            </a>
          );
          re.push(<p className={styles.checkedP} />);
        }
      });

      return re;
    };

    return <div>{createDom()}</div>;
  };

  render() {
    const { options, form } = this.props;
    const { getFieldDecorator } = form;
    const { checkedList, gropKey } = this.state;
    const { dataIndex0, dataIndex1, options0, options1 } = this.props.options;
    this.setState({options0});
    return (
      <div>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={2} sm={0}>
            <span className="span-titile">品种</span>
          </Col>
          <Col md={18} sm={24}>
            <FormItem label="">
              {getFieldDecorator(dataIndex0)(
                <CheckboxGroup options={this.state.options0} onChange={this.onChangeP} />
              )}
              <Checkbox
                indeterminate={this.state.indeterminate}
                onChange={this.onCheckAllChange}
                checked={this.state.checkAll}
              >
                全选
              </Checkbox>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={{ md: 8, lg: 24, xl: 48 }}>
          <Col md={2} sm={0}>
            <span className="span-titile">仓库/装点</span>
          </Col>
          <Col md={18} sm={24}>
            <FormItem label="">
              {getFieldDecorator(dataIndex1)(
                <CheckboxGroup
                  className={styles.checkstyle}
                  style={{ width: '100%' }}
                  key={gropKey}
                >
                  {this.groupDo()}
                </CheckboxGroup>
              )}
            </FormItem>
          </Col>
        </Row>
      </div>
    );
  }
}
// DPLink = Form.create({})(DPLink);
// export default DPLink;
